let ctx = null;
let canvas = null;
let startX = 0;
let startY = 0;
let endX = 0;
let endY = 0;
let originData = []
export default {
    data() {
        return {
            rectData: [],
            isDrawing: false
        }
    },
    methods: {
        initRect() {
            canvas = document.getElementById('myCanvas');
            ctx = canvas.getContext('2d');
            this._drawType = 'rect'
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            canvas.addEventListener('mousedown', this.rect_onMousedown);
            canvas.addEventListener('mousemove', this.rect_onMousemove);
            canvas.addEventListener('mouseup', this.rect_onMouseup);
            canvas.addEventListener('mouseleave', this.rect_onMouseleave);
        },
        getRects() {
            return this.rectData;
        },
        // 清空矩形
        resetRect() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            this.rect_removeEvent()
            this.rectData = []
        },
        // 取消绘制,此时重置为默认值
        cancelRect() {
            if (!ctx) return;
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            this.rect_removeEvent()
            this.rectData = [...originData]
            this.rect_draw()
        },
        rect_onMousedown(e) {
            startX = e.offsetX;
            startY = e.offsetY;
            this.isDrawing = true;
        },
        rect_onMousemove(e) {
            if (!this.isDrawing) return;
            endX = e.offsetX;
            endY = e.offsetY;
            // 清除之前的矩形
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            // 画新的矩形
            const width = endX - startX;
            const height = endY - startY;
            this.drawText(startX, startY, endX, endY)
            ctx.strokeStyle = "#ccc";
            ctx.strokeRect(startX, startY, width, height);
        },
        rect_draw() {
            canvas = document.getElementById('myCanvas');
            ctx = canvas.getContext('2d');
            if (this.rectData.length === 0) return;
            originData = [...this.rectData]
            const [
                startX,
                startY,
                endX,
                endY
            ] = this.rectData;
            const width = endX - startX;
            const height = endY - startY;
            this.drawText(startX, startY, endX, endY)
            ctx.strokeStyle = "#ccc";
            ctx.strokeRect(startX, startY, width, height);
        },
        drawText(startX, startY, endX, endY) {
            const maxWidth = Math.abs(endX - startX);
            const maxHeight = Math.abs(endY - startY);
            // 绘制文本
            ctx.fillStyle = 'red';
            ctx.font = '18px Arial';
            const text = `${maxWidth*4}x${maxHeight*4}=${maxWidth*maxHeight*16}`;
            const textWidth = ctx.measureText(text).width;
            ctx.fillText(text, startX + (maxWidth - textWidth) / 2, startY + (maxHeight / 2));
        },
        rect_onMouseup() {
            this.isDrawing = false;
            this.rectData = [
                startX,
                startY,
                endX,
                endY,
            ]
            this.rect_drawEnd && this.rect_drawEnd()
            this.polygon_draw && this.polygon_draw()
            this.line_draw && this.line_draw()
            this.rect_removeEvent()
        },
        rect_onMouseleave() {
            this.isDrawing = false;
            this.rectData = [
                startX,
                startY,
                endX,
                endY,
            ]
            this.rect_drawEnd && this.rect_drawEnd()
            this.polygon_draw && this.polygon_draw()
            this.line_draw && this.line_draw()
            this.rect_removeEvent()
        },
        rect_removeEvent() {
            canvas.removeEventListener('mousedown', this.rect_onMousedown)
            canvas.removeEventListener('mousemove', this.rect_onMousemove)
            canvas.removeEventListener('mouseup', this.rect_onMouseup)
            canvas.removeEventListener('mouseleave', this.rect_onMouseleave)
        }
    }
}